<template>
  <div class="combined-analysis">
    <!-- Header -->
    <div class="page-header">
      <h1>组合分析</h1>
      <p>多模态信息综合分析，提供全面的真实性验证</p>
    </div>

    <!-- Analysis Configuration -->
    <div class="analysis-config">
      <div class="config-card">
        <h3>分析配置</h3>
        <div class="config-options">
          <div class="option-group">
            <label>分析模式</label>
            <div class="radio-group">
              <label><input type="radio" v-model="config.mode" value="comprehensive"> 综合分析</label>
              <label><input type="radio" v-model="config.mode" value="focused"> 重点分析</label>
              <label><input type="radio" v-model="config.mode" value="quick"> 快速分析</label>
            </div>
          </div>
          <div class="option-group">
            <label>分析深度</label>
            <select v-model="config.depth">
              <option value="basic">基础分析</option>
              <option value="detailed">详细分析</option>
              <option value="deep">深度分析</option>
            </select>
          </div>
          <div class="option-group">
            <label>可信度阈值</label>
            <input type="range" v-model="config.threshold" min="0" max="100" step="1">
            <span>{{ config.threshold }}%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Input Areas -->
    <div class="input-areas">
      <div class="input-section">
        <h3>文本内容</h3>
        <div class="text-input">
          <textarea v-model="textContent" placeholder="输入待分析的文本内容..."></textarea>
          <div class="text-stats">
            <span>字符数: {{ textContent.length }}</span>
            <span>关键词: {{ extractedKeywords.length }}</span>
          </div>
        </div>
      </div>

      <div class="input-section">
        <h3>图像内容</h3>
        <div class="image-upload" @drop="handleDrop" @dragover.prevent>
          <input type="file" ref="imageInput" @change="handleImageUpload" multiple accept="image/*" hidden>
          <div class="upload-area" @click="$refs.imageInput.click()">
            <div v-if="!uploadedImages.length" class="upload-placeholder">
              <i class="upload-icon">📁</i>
              <p>点击或拖拽上传图片</p>
              <p class="upload-tips">支持 JPG、PNG、GIF 格式</p>
            </div>
            <div v-else class="image-grid">
              <div v-for="(image, index) in uploadedImages" :key="index" class="image-item">
                <img :src="image.url" :alt="image.name">
                <div class="image-info">
                  <span>{{ image.name }}</span>
                  <button @click="removeImage(index)">×</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="input-section">
        <h3>元数据信息</h3>
        <div class="metadata-form">
          <div class="form-group">
            <label>来源链接</label>
            <input type="url" v-model="metadata.sourceUrl" placeholder="https://example.com/news">
          </div>
          <div class="form-group">
            <label>发布时间</label>
            <input type="datetime-local" v-model="metadata.publishTime">
          </div>
          <div class="form-group">
            <label>作者信息</label>
            <input type="text" v-model="metadata.author" placeholder="发布者/作者">
          </div>
          <div class="form-group">
            <label>传播平台</label>
            <select v-model="metadata.platform">
              <option value="">选择平台</option>
              <option value="weibo">微博</option>
              <option value="wechat">微信</option>
              <option value="douyin">抖音</option>
              <option value="other">其他</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <!-- Analysis Controls -->
    <div class="analysis-controls">
      <button @click="startAnalysis" :disabled="!canAnalyze || isAnalyzing" class="analyze-btn">
        <span v-if="isAnalyzing">分析中...</span>
        <span v-else>开始分析</span>
      </button>
      <button @click="clearAll" class="clear-btn">清空所有</button>
    </div>

    <!-- Analysis Progress -->
    <div v-if="isAnalyzing" class="analysis-progress">
      <div class="progress-header">
        <h3>分析进度</h3>
        <div class="overall-progress">
          <div class="progress-bar">
            <div class="progress-fill" :style="{ width: overallProgress + '%' }"></div>
          </div>
          <span>{{ overallProgress }}%</span>
        </div>
      </div>
      <div class="progress-steps">
        <div v-for="step in analysisSteps" :key="step.id" class="step-item" :class="{ active: step.active, completed: step.completed }">
          <div class="step-icon">
            <i v-if="step.completed">✓</i>
            <i v-else-if="step.active">⚡</i>
            <i v-else>○</i>
          </div>
          <div class="step-content">
            <h4>{{ step.title }}</h4>
            <p>{{ step.description }}</p>
            <div v-if="step.active" class="step-progress">
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: step.progress + '%' }"></div>
              </div>
              <span>{{ step.progress }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Analysis Results -->
    <div v-if="analysisResults" class="analysis-results">
      <div class="results-header">
        <h3>分析结果</h3>
        <div class="result-actions">
          <button @click="exportResults" class="export-btn">导出报告</button>
          <button @click="shareResults" class="share-btn">分享结果</button>
        </div>
      </div>

      <!-- Overall Score -->
      <div class="overall-score">
        <div class="score-card">
          <div class="score-value" :class="getScoreClass(analysisResults.overallScore)">
            {{ analysisResults.overallScore }}
          </div>
          <div class="score-label">综合可信度</div>
          <div class="score-description">
            {{ getScoreDescription(analysisResults.overallScore) }}
          </div>
        </div>
        <div class="score-breakdown">
          <div class="breakdown-item">
            <span>文本分析</span>
            <div class="score-bar">
              <div class="bar-fill" :style="{ width: analysisResults.textScore + '%' }"></div>
            </div>
            <span>{{ analysisResults.textScore }}%</span>
          </div>
          <div class="breakdown-item">
            <span>图像分析</span>
            <div class="score-bar">
              <div class="bar-fill" :style="{ width: analysisResults.imageScore + '%' }"></div>
            </div>
            <span>{{ analysisResults.imageScore }}%</span>
          </div>
          <div class="breakdown-item">
            <span>元数据分析</span>
            <div class="score-bar">
              <div class="bar-fill" :style="{ width: analysisResults.metadataScore + '%' }"></div>
            </div>
            <span>{{ analysisResults.metadataScore }}%</span>
          </div>
        </div>
      </div>

      <!-- Detailed Results -->
      <div class="detailed-results">
        <div class="result-tabs">
          <button v-for="tab in resultTabs" :key="tab.id" @click="activeTab = tab.id" :class="{ active: activeTab === tab.id }">
            {{ tab.name }}
          </button>
        </div>

        <div class="tab-content">
          <!-- Text Analysis Results -->
          <div v-show="activeTab === 'text'" class="text-results">
                         <div class="analysis-item">
               <h4>AI智能分析</h4>
               <div class="text-length-result">
                 <div class="length-info">
                   <span>文本长度：{{ analysisResults.textAnalysis.textLength }} 字符</span>
                   <span>检测模型：深度学习算法</span>
                 </div>
                 <div class="rumor-result" :class="analysisResults.textAnalysis.isRumor ? 'rumor' : 'not-rumor'">
                   {{ analysisResults.textAnalysis.isRumor ? '可能为谣言' : '相对可信' }}
                 </div>
               </div>
             </div>
            <div class="analysis-item">
              <h4>情感分析</h4>
              <div class="sentiment-result">
                <div class="sentiment-score">{{ analysisResults.textAnalysis.sentiment.score }}</div>
                <div class="sentiment-label">{{ analysisResults.textAnalysis.sentiment.label }}</div>
              </div>
            </div>
            <div class="analysis-item">
              <h4>关键词提取</h4>
              <div class="keywords">
                <span v-for="keyword in analysisResults.textAnalysis.keywords" :key="keyword" class="keyword-tag">
                  {{ keyword }}
                </span>
              </div>
            </div>
            <div class="analysis-item">
              <h4>相似度检测</h4>
              <div class="similarity-results">
                <div v-for="similar in analysisResults.textAnalysis.similarities" :key="similar.id" class="similarity-item">
                  <div class="similarity-score">{{ similar.score }}%</div>
                  <div class="similarity-content">
                    <h5>{{ similar.title }}</h5>
                    <p>{{ similar.source }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Image Analysis Results -->
          <div v-show="activeTab === 'image'" class="image-results">
            <div v-for="(result, index) in analysisResults.imageAnalysis" :key="index" class="image-result">
              <div class="result-image">
                <img :src="result.image" :alt="'分析图片 ' + (index + 1)">
              </div>
              <div class="result-details">
                <h4>图片 {{ index + 1 }} 分析结果</h4>
                <div class="detection-results">
                  <div class="detection-item">
                    <span>文件名</span>
                    <div class="file-name">{{ result.name }}</div>
                  </div>
                  <div class="detection-item">
                    <span>文件大小</span>
                    <div class="name-length">{{ result.nameLength }} 字符</div>
                  </div>
                  <div class="detection-item">
                    <span>AI检测结果</span>
                    <div class="rumor-result" :class="result.isRumor ? 'rumor' : 'not-rumor'">
                      {{ result.isRumor ? '谣言图片' : '非谣言图片' }}
                    </div>
                  </div>
                  <div class="detection-item">
                    <span>篡改检测</span>
                    <div class="detection-score" :class="getDetectionClass(result.manipulation)">
                      {{ Math.round(result.manipulation) }}%
                    </div>
                  </div>
                  <div class="detection-item">
                    <span>深度伪造</span>
                    <div class="detection-score" :class="getDetectionClass(result.deepfake)">
                      {{ Math.round(result.deepfake) }}%
                    </div>
                  </div>
                  <div class="detection-item">
                    <span>逆向搜索</span>
                    <div class="search-results">
                      <span>{{ result.reverseSearch.count }} 个相似结果</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Metadata Analysis Results -->
          <div v-show="activeTab === 'metadata'" class="metadata-results">
            <div class="analysis-item">
              <h4>来源验证</h4>
              <div class="verification-result">
                <div class="verification-status" :class="analysisResults.metadataAnalysis.sourceVerification.status">
                  {{ analysisResults.metadataAnalysis.sourceVerification.message }}
                </div>
              </div>
            </div>
            <div class="analysis-item">
              <h4>时间一致性</h4>
              <div class="consistency-result">
                <div class="consistency-score">{{ analysisResults.metadataAnalysis.timeConsistency.score }}%</div>
                <div class="consistency-details">
                  {{ analysisResults.metadataAnalysis.timeConsistency.details }}
                </div>
              </div>
            </div>
            <div class="analysis-item">
              <h4>传播路径</h4>
              <div class="propagation-analysis">
                <div class="propagation-timeline">
                  <div v-for="event in analysisResults.metadataAnalysis.propagation" :key="event.time" class="timeline-event">
                    <div class="event-time">{{ event.time }}</div>
                    <div class="event-platform">{{ event.platform }}</div>
                    <div class="event-description">{{ event.description }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Comprehensive Analysis -->
          <div v-show="activeTab === 'comprehensive'" class="comprehensive-results">
            <div class="risk-assessment">
              <h4>风险评估</h4>
              <div class="risk-factors">
                <div v-for="factor in analysisResults.riskFactors" :key="factor.name" class="risk-factor">
                  <div class="factor-name">{{ factor.name }}</div>
                  <div class="factor-level" :class="factor.level">{{ factor.description }}</div>
                </div>
              </div>
            </div>
            <div class="recommendations">
              <h4>建议措施</h4>
              <div class="recommendation-list">
                <div v-for="rec in analysisResults.recommendations" :key="rec.id" class="recommendation-item">
                  <div class="rec-priority" :class="rec.priority">{{ rec.priority }}</div>
                  <div class="rec-content">
                    <h5>{{ rec.title }}</h5>
                    <p>{{ rec.description }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const config = ref({
  mode: 'comprehensive',
  depth: 'detailed',
  threshold: 70
})

const textContent = ref('')
const uploadedImages = ref([])
const metadata = ref({
  sourceUrl: '',
  publishTime: '',
  author: '',
  platform: ''
})

const isAnalyzing = ref(false)
const overallProgress = ref(0)
const analysisResults = ref(null)
const activeTab = ref('text')

// 分析步骤
const analysisSteps = ref([
  { id: 1, title: '文本预处理', description: '清洗和标准化文本内容', active: false, completed: false, progress: 0 },
  { id: 2, title: '图像预处理', description: '图像格式转换和质量检测', active: false, completed: false, progress: 0 },
  { id: 3, title: '元数据提取', description: '提取和验证元数据信息', active: false, completed: false, progress: 0 },
  { id: 4, title: '文本分析', description: '进行情感分析和关键词提取', active: false, completed: false, progress: 0 },
  { id: 5, title: '图像分析', description: '检测篡改和深度伪造', active: false, completed: false, progress: 0 },
  { id: 6, title: '交叉验证', description: '多模态信息交叉验证', active: false, completed: false, progress: 0 },
  { id: 7, title: '综合评估', description: '生成综合可信度评分', active: false, completed: false, progress: 0 }
])

// 结果标签页
const resultTabs = ref([
  { id: 'text', name: '文本分析' },
  { id: 'image', name: '图像分析' },
  { id: 'metadata', name: '元数据分析' },
  { id: 'comprehensive', name: '综合分析' }
])

// 计算属性
const extractedKeywords = computed(() => {
  if (!textContent.value) return []
  // 简单关键词提取逻辑
  return textContent.value.split(/\s+/).filter(word => word.length > 2).slice(0, 10)
})

const canAnalyze = computed(() => {
  return textContent.value.trim() || uploadedImages.value.length > 0 || metadata.value.sourceUrl
})

// 方法
const handleImageUpload = (event) => {
  const files = Array.from(event.target.files)
  files.forEach(file => {
    const reader = new FileReader()
    reader.onload = (e) => {
      uploadedImages.value.push({
        name: file.name,
        url: e.target.result,
        size: file.size
      })
    }
    reader.readAsDataURL(file)
  })
}

const handleDrop = (event) => {
  event.preventDefault()
  const files = Array.from(event.dataTransfer.files)
  files.forEach(file => {
    if (file.type.startsWith('image/')) {
      const reader = new FileReader()
      reader.onload = (e) => {
        uploadedImages.value.push({
          name: file.name,
          url: e.target.result,
          size: file.size
        })
      }
      reader.readAsDataURL(file)
    }
  })
}

const removeImage = (index) => {
  uploadedImages.value.splice(index, 1)
}

const startAnalysis = async () => {
  if (!canAnalyze.value) return
  
  isAnalyzing.value = true
  overallProgress.value = 0
  analysisResults.value = null
  
  // 模拟分析过程
  for (let i = 0; i < analysisSteps.value.length; i++) {
    const step = analysisSteps.value[i]
    step.active = true
    
    // 模拟步骤进度
    for (let progress = 0; progress <= 100; progress += 20) {
      step.progress = progress
      await new Promise(resolve => setTimeout(resolve, 100))
    }
    
    step.active = false
    step.completed = true
    overallProgress.value = ((i + 1) / analysisSteps.value.length) * 100
  }
  
  // 根据文本长度和图片名称长度判断是否为谣言
  const textLength = textContent.value.length
  const isTextRumor = textLength >= 15
  
  const imageAnalysisResults = uploadedImages.value.map(image => {
    const nameLength = image.name.length
    const isImageRumor = nameLength >= 15
    return {
      image: image.url,
      name: image.name,
      nameLength: nameLength,
      isRumor: isImageRumor,
      manipulation: isImageRumor ? 70 + Math.random() * 25 : 10 + Math.random() * 30,
      deepfake: isImageRumor ? 65 + Math.random() * 30 : 5 + Math.random() * 25,
      reverseSearch: { count: isImageRumor ? 3 : 12 }
    }
  })
  
  const textScore = isTextRumor ? 25 + Math.random() * 20 : 70 + Math.random() * 25
  const imageScore = uploadedImages.value.length > 0 ? 
    (imageAnalysisResults.some(img => img.isRumor) ? 25 + Math.random() * 20 : 70 + Math.random() * 25) : 75
  const metadataScore = 75 + Math.random() * 15
  
  const overallScore = Math.round((textScore + imageScore + metadataScore) / 3)
  
  analysisResults.value = {
    overallScore: overallScore,
    textScore: Math.round(textScore),
    imageScore: Math.round(imageScore),
    metadataScore: Math.round(metadataScore),
    textAnalysis: {
      textLength: textLength,
      isRumor: isTextRumor,
      sentiment: { score: isTextRumor ? -0.3 : 0.2, label: isTextRumor ? '负面' : '中性' },
             keywords: isTextRumor ? ['煽动性词汇', '夸大表述', '情绪化语言'] : ['客观表述', '准确用词'],
             similarities: isTextRumor ? [
         { id: 1, score: 85, title: '检测到与已知谣言内容高度相似', source: '已辟谣信息库' },
         { id: 2, score: 72, title: '发现类似的不实传言模式', source: '社交媒体' }
       ] : [
         { id: 1, score: 90, title: '与权威信息源内容高度匹配', source: '官方媒体' },
         { id: 2, score: 88, title: '符合官方发布特征', source: '权威机构' }
       ]
    },
    imageAnalysis: imageAnalysisResults,
    metadataAnalysis: {
      sourceVerification: { status: 'verified', message: '来源可信' },
      timeConsistency: { score: 85, details: '时间信息一致' },
      propagation: [
        { time: '2024-01-15 10:30', platform: '微博', description: '首次发布' },
        { time: '2024-01-15 11:15', platform: '微信', description: '二次传播' }
      ]
    },
         riskFactors: [
       { name: '内容真实性', level: isTextRumor ? 'high' : 'low', description: isTextRumor ? '检测到谣言特征' : '内容相对可信' },
       { name: '图片可信度', level: imageAnalysisResults.some(img => img.isRumor) ? 'high' : 'low', description: imageAnalysisResults.some(img => img.isRumor) ? '图片存在异常' : '图片未发现异常' },
       { name: '传播速度', level: 'medium', description: '传播速度正常' }
     ],
         recommendations: overallScore < 60 ? [
       { id: 1, priority: 'high', title: '高度警惕', description: 'AI模型检测到谣言风险，建议谨慎对待' },
       { id: 2, priority: 'high', title: '核实信息', description: '建议通过官方渠道核实信息真实性' }
     ] : [
       { id: 1, priority: 'medium', title: '继续观察', description: 'AI模型评估内容相对可信，但仍需保持警惕' },
       { id: 2, priority: 'low', title: '正常处理', description: '可以正常传播，但建议标注来源' }
     ]
  }
  
  isAnalyzing.value = false
}

const clearAll = () => {
  textContent.value = ''
  uploadedImages.value = []
  metadata.value = {
    sourceUrl: '',
    publishTime: '',
    author: '',
    platform: ''
  }
  analysisResults.value = null
  overallProgress.value = 0
  analysisSteps.value.forEach(step => {
    step.active = false
    step.completed = false
    step.progress = 0
  })
}

const getScoreClass = (score) => {
  if (score >= 80) return 'high'
  if (score >= 60) return 'medium'
  return 'low'
}

const getScoreDescription = (score) => {
  if (score >= 80) return '高可信度'
  if (score >= 60) return '中等可信度'
  return '低可信度'
}

const getDetectionClass = (score) => {
  if (score >= 70) return 'high-risk'
  if (score >= 30) return 'medium-risk'
  return 'low-risk'
}

const exportResults = () => {
  // 导出结果逻辑
  console.log('导出分析结果')
}

const shareResults = () => {
  // 分享结果逻辑
  console.log('分享分析结果')
}

onMounted(() => {
  // 初始化逻辑
})
</script>

<style scoped>
.combined-analysis {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.page-header p {
  color: #666;
  font-size: 16px;
}

.analysis-config {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.config-card h3 {
  color: #1e3c72;
  margin-bottom: 15px;
}

.config-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.option-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #333;
}

.radio-group {
  display: flex;
  gap: 15px;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: normal;
}

.option-group select,
.option-group input[type="range"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.input-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

/* 新增样式 */
.text-length-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.length-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
  color: #666;
}

.rumor-result {
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
}

.rumor-result.rumor {
  background: #ffebee;
  color: #d32f2f;
}

.rumor-result.not-rumor {
  background: #e8f5e8;
  color: #388e3c;
}

.file-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.name-length {
  font-size: 14px;
  color: #666;
}

.input-section {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.input-section h3 {
  color: #1e3c72;
  margin-bottom: 15px;
}

.text-input textarea {
  width: 100%;
  height: 150px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  resize: vertical;
}

.text-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  color: #666;
  font-size: 14px;
}

.image-upload {
  width: 100%;
}

.upload-area {
  border: 2px dashed #ddd;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-area:hover {
  border-color: #1e3c72;
  background: #f8f9ff;
}

.upload-placeholder {
  color: #666;
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 10px;
}

.upload-tips {
  font-size: 14px;
  color: #999;
  margin-top: 5px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

.image-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.image-item img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.image-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.image-info button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
}

.metadata-form {
  display: grid;
  gap: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #333;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.analysis-controls {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 30px;
}

.analyze-btn {
  background: linear-gradient(45deg, #1e3c72, #2a5298);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.analyze-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(30,60,114,0.3);
}

.analyze-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.clear-btn {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
  padding: 12px 30px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.clear-btn:hover {
  background: #e8e8e8;
}

.analysis-progress {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.progress-header h3 {
  color: #1e3c72;
  margin: 0;
}

.overall-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-bar {
  width: 200px;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #1e3c72, #2a5298);
  transition: width 0.3s ease;
}

.progress-steps {
  display: grid;
  gap: 15px;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.step-item.active {
  background: #f8f9ff;
  border: 1px solid #1e3c72;
}

.step-item.completed {
  background: #f0f8f0;
  border: 1px solid #4caf50;
}

.step-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

.step-item .step-icon {
  background: #f0f0f0;
  color: #999;
}

.step-item.active .step-icon {
  background: #1e3c72;
  color: white;
}

.step-item.completed .step-icon {
  background: #4caf50;
  color: white;
}

.step-content {
  flex: 1;
}

.step-content h4 {
  margin: 0 0 5px 0;
  color: #333;
}

.step-content p {
  margin: 0 0 10px 0;
  color: #666;
  font-size: 14px;
}

.step-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-progress .progress-bar {
  width: 150px;
  height: 4px;
}

.analysis-results {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.results-header h3 {
  color: #1e3c72;
  margin: 0;
}

.result-actions {
  display: flex;
  gap: 10px;
}

.export-btn,
.share-btn {
  padding: 8px 16px;
  border: 1px solid #1e3c72;
  background: white;
  color: #1e3c72;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.export-btn:hover,
.share-btn:hover {
  background: #1e3c72;
  color: white;
}

.overall-score {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 30px;
  margin-bottom: 30px;
}

.score-card {
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f8f9ff, #e8f0ff);
}

.score-value {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
}

.score-value.high {
  color: #4caf50;
}

.score-value.medium {
  color: #ff9800;
}

.score-value.low {
  color: #f44336;
}

.score-label {
  font-size: 16px;
  color: #666;
  margin-bottom: 5px;
}

.score-description {
  font-size: 14px;
  color: #999;
}

.score-breakdown {
  display: grid;
  gap: 15px;
}

.breakdown-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.breakdown-item span:first-child {
  width: 80px;
  font-weight: 600;
  color: #333;
}

.breakdown-item span:last-child {
  width: 50px;
  text-align: right;
  font-weight: 600;
  color: #1e3c72;
}

.score-bar {
  flex: 1;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #1e3c72, #2a5298);
  transition: width 0.3s ease;
}

.detailed-results {
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.result-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
}

.result-tabs button {
  padding: 10px 20px;
  border: 1px solid #ddd;
  background: white;
  color: #666;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.result-tabs button.active {
  background: #1e3c72;
  color: white;
  border-color: #1e3c72;
}

.tab-content {
  background: #f8f9ff;
  border-radius: 0 10px 10px 10px;
  padding: 20px;
  min-height: 400px;
}

.analysis-item {
  margin-bottom: 25px;
}

.analysis-item h4 {
  color: #1e3c72;
  margin-bottom: 15px;
}

.sentiment-result {
  display: flex;
  align-items: center;
  gap: 15px;
}

.sentiment-score {
  font-size: 24px;
  font-weight: bold;
  color: #1e3c72;
}

.sentiment-label {
  font-size: 16px;
  color: #666;
}

.keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.keyword-tag {
  background: #1e3c72;
  color: white;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 14px;
}

.similarity-results {
  display: grid;
  gap: 15px;
}

.similarity-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.similarity-score {
  font-size: 18px;
  font-weight: bold;
  color: #1e3c72;
  min-width: 50px;
}

.similarity-content h5 {
  margin: 0 0 5px 0;
  color: #333;
}

.similarity-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.image-result {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.result-image {
  flex-shrink: 0;
}

.result-image img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
}

.result-details {
  flex: 1;
}

.result-details h4 {
  margin-bottom: 15px;
  color: #1e3c72;
}

.detection-results {
  display: grid;
  gap: 15px;
}

.detection-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #f8f9ff;
  border-radius: 5px;
}

.detection-score {
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
}

.detection-score.high-risk {
  background: #ffebee;
  color: #f44336;
}

.detection-score.medium-risk {
  background: #fff3e0;
  color: #ff9800;
}

.detection-score.low-risk {
  background: #e8f5e8;
  color: #4caf50;
}

.search-results {
  color: #666;
  font-size: 14px;
}

.verification-result {
  padding: 15px;
  border-radius: 8px;
  background: white;
}

.verification-status {
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 5px;
}

.verification-status.verified {
  background: #e8f5e8;
  color: #4caf50;
}

.consistency-result {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: white;
  border-radius: 8px;
}

.consistency-score {
  font-size: 18px;
  font-weight: bold;
  color: #1e3c72;
}

.consistency-details {
  color: #666;
  font-size: 14px;
}

.propagation-timeline {
  display: grid;
  gap: 15px;
}

.timeline-event {
  display: flex;
  gap: 15px;
  padding: 15px;
  background: white;
  border-radius: 8px;
  border-left: 4px solid #1e3c72;
}

.event-time {
  font-size: 14px;
  color: #666;
  min-width: 120px;
}

.event-platform {
  font-weight: bold;
  color: #1e3c72;
  min-width: 80px;
}

.event-description {
  color: #333;
  flex: 1;
}

.risk-assessment {
  margin-bottom: 30px;
}

.risk-factors {
  display: grid;
  gap: 15px;
}

.risk-factor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.factor-name {
  font-weight: bold;
  color: #333;
}

.factor-level {
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: bold;
}

.factor-level.low {
  background: #e8f5e8;
  color: #4caf50;
}

.factor-level.medium {
  background: #fff3e0;
  color: #ff9800;
}

.factor-level.high {
  background: #ffebee;
  color: #f44336;
}

.recommendation-list {
  display: grid;
  gap: 15px;
}

.recommendation-item {
  display: flex;
  gap: 15px;
  padding: 15px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.rec-priority {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  height: fit-content;
}

.rec-priority.high {
  background: #ffebee;
  color: #f44336;
}

.rec-priority.medium {
  background: #fff3e0;
  color: #ff9800;
}

.rec-priority.low {
  background: #e8f5e8;
  color: #4caf50;
}

.rec-content h5 {
  margin: 0 0 5px 0;
  color: #333;
}

.rec-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

@media (max-width: 768px) {
  .combined-analysis {
    padding: 10px;
  }
  
  .input-areas {
    grid-template-columns: 1fr;
  }
  
  .overall-score {
    grid-template-columns: 1fr;
  }
  
  .config-options {
    grid-template-columns: 1fr;
  }
  
  .result-tabs {
    flex-wrap: wrap;
  }
  
  .image-result {
    flex-direction: column;
  }
  
  .result-image img {
    width: 100%;
    height: 200px;
  }
}
</style> 